<template>
	<view class="content">
		<view class="ifobox" v-for="(item,index) in arr" :key="index">
			<view class="left">
				<view class="top">
					<text class="plotname">{{item.lastname}}</text>
					<text class="square">{{item.contact}}</text>
					<text class="telephone">{{item.contact_number}}</text>
				</view>
				<view class="policebox">
					<image src="https://fangguaner.wm76.mtnet.ren/static/applet/jincha.png" mode="" class="police">
					</image>
					<text class="dwell">{{item.community}}</text>
					<text class="username">{{item.guard}}</text>
				</view>
			</view>
			<view class="operation">
				<view class="right" @click="verify(item.id)">
					核实通过
				</view>
				<view class="fail" @click="fail(item.id)">
					核实失败
				</view>
			</view>
		</view>


		<u-popup v-model="show" mode="center">
			<view class="tangchubox">
				<textarea :value="remark" placeholder="请输入不通过原因" class="reason" @input="shuru" />
				<view class="submits" @click="submit">
					提交
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getverify
	} from "../../api/api/index.js"
	import {
		getawaitverify
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				arr: [],
				page: 0,
				limit: 20,
				isOk: false,
				reason: "",
				show: false,
				id: 0
			}
		},
		methods: {
			verify(item) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let that = this
				let data = {
					id: item,
					type: 1
				}
				getverify(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
					this.arr = []
					this.isOk = false
					this.page = 0
					// setTimeout(function(){
					that.public()
					// },1500)

				})
			},
			fail(item) {
				this.show = true
				this.id = item
			},
			shuru(e) {
				this.reason = e.detail.value
			},
			submit() {
				let that = this
				let data = {
					id: this.id,
					type: 3,
					reason: this.reason
				}
				getverify(data).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
					that.arr = []
					that.isOk = false
					that.page = 0
					this.public()
					that.show = false
					setTimeout(function() {
						uni.navigateBack({})
					}, 1500)
				})
			},
			public() {
				if (this.isOk) {
					return uni.showToast({
						icon: 'none',
						title: '没有更多了'
					})
				}
				// uni.showLoading({
				// 	mask: true,
				// 	title: '加载中'
				// })
				this.page++
				getawaitverify({
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.arr = this.arr.concat(res.data)
					if (res.data.length < this.limit) {
						this.isOk = true
					}
				})
				// .catch(err=>{
				// })
			}
		},
		onLoad() {},
		onShow() {
			this.arr = []
			this.isOk = false
			this.page = 0
			this.public()
		},
		onReachBottom() {
			this.public()
		}
	}
</script>

<style scoped lang="less">
	.tangchubox {
		width: 658rpx;

		.reason {
			font-size: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.submits {
			width: 658rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #ef0000;
			color: #FFFFFF;
		}
	}

	.content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #EDEDED;
	}

	/* 头部导航 */
	.nav {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 21rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
	}

	.cont {
		width: 300rpx;
		height: 54rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		font-size: 24rpx;
		line-height: 54rpx;
		text-align: center;
	}

	.conts {
		color: #FFFFFF;
		background-color: #E32D24;
	}

	.operation {
		display: flex;
		align-items: center;
		margin-left: 400rpx;
	}

	.ifobox {
		margin: 29rpx 20rpx;
		background-color: #FFFFFF;
		box-shadow: 3rpx 4rpx 7rpx 0rpx rgba(180, 180, 180, 0.46);
		border-radius: 10rpx;
		padding: 40rpx 26rpx 22rpx 36rpx;
		box-sizing: border-box;
	}

	.plotname {
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		color: #000000;
	}

	.square {
		font-size: 22rpx;
		font-weight: 700;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #666666;
		margin-left: 23rpx;
		font-family: MicrosoftYaHei-Bold;
	}

	.dwon {
		margin-top: 20rpx;
	}

	.telephone {
		font-family: PingFang-SC-Heavy;
		font-size: 24rpx;
		color: #666666;
		margin-left: 24rpx;
	}

	.name {
		font-family: PingFang-SC-Heavy;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #666666;
		margin-left: 20rpx;
	}

	.policebox {
		margin-top: 49rpx;
	}

	.police {
		width: 25rpx;
		height: 39rpx;
	}

	.dwell {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #666666;
		margin-left: 18rpx;
	}

	.username {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #666666;
		margin-left: 18rpx;
	}

	.right {
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #993300;
		width: 128rpx;
		height: 60rpx;
		background-color: #ffcc00;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 12rpx;
	}

	.fail {
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #FFFFFF;
		width: 128rpx;
		height: 60rpx;
		background-color: #df4744;
		/* border: solid 3rpx #df4744; */
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 12rpx;
		margin-left: 20rpx;
	}
</style>
